﻿
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scable=no,viewport-fit=cover" />
    <meta name="apple-mobile-web-app-title" content="Eleme 404" />
    <meta name="theme-color" content="#55A2E6" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="shortcut icon" href="//board.faas.ele.me/favicon.ico" type="image/x-icon" />
    <title>404 eleme</title>

    <style>
        * {
            box-sizing: border-box;
            -webkit-tap-highlight-color: transparent;
        }

        ::selection {
            background-color: #fff;
            color: #3e9ce0;
        }

        @font-face {
            font-family: 'Nunito';
            font-style: normal;
            font-weight: 900;
            font-display: swap;
            src: local('Nunito Black'), local('Nunito-Black'), url(https://shadow.elemecdn.com/lib/404@1.0.0/NunitoBlack.woff2) format('woff2');
            unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
        }

        body,
        html {
            position: relative;
            height: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden;
            background-image: linear-gradient(135deg, #9cc3ed 0%, #4c9ee6 100%);
            background-size: cover;
            background-repeat: no-repeat;
            background-color: #73b0e9;
            color: #e9f1f9;
            font-family: -apple-system, 'Noto Sans', 'Helvetica Neue', Helvetica, 'Nimbus Sans L', Arial, 'Liberation Sans', 'PingFang SC', 'Hiragino Sans GB', 'Noto Sans CJK SC', 'Source Han Sans SC', 'Source Han Sans CN', 'Microsoft YaHei', 'Wenquanyi Micro Hei', 'WenQuanYi Zen Hei', 'ST Heiti', SimHei, 'WenQuanYi Zen Hei Sharp', sans-serif;
        }

        .man,
        .status {
            position: absolute;
        }

        .status {
            font-size: 480px;
            right: 100px;
            bottom: 10px;
            margin: 0;
            padding: 0;
            line-height: 1;
            user-select: none;
            background-image: linear-gradient(to right, rgba(136, 186, 235, 0.678) 0%, rgb(94, 165, 228) 100%);
            background-clip: text;
            -webkit-background-clip: text;
            color: transparent;
            font-family: 'Nunito';
        }

        .logo {
            display: inline-block;
            height: 20px;
            vertical-align: middle;
            margin-right: 7px;
        }

        .man {
            z-index: 2;
            width: 25%;
            min-width: 250px;
            left: 5%;
            bottom: 70px;
        }

        .content {
            position: relative;
            z-index: 3;
            padding-left: 5%;
            margin-top: 80px;
        }

        .indicator {
            display: inline-block;
            font-size: 0;
            padding: 10px 25px;
            padding-left: 20px;
            margin-bottom: 40px;
            border-radius: 7px;
            color: #f2f8ff;
            background: rgba(255, 255, 255, 0.18);
            box-shadow: 7px 18px 31px -17px rgba(81, 161, 230, 0.5);
        }

            .indicator > span {
                font-size: 20px;
                vertical-align: middle;
            }

        .suggestions {
            margin: 0;
            padding-left: 0;
            list-style: none;
        }

        .suggest {
            margin-bottom: 50px;
        }

        .suggest_title {
            position: relative;
            display: block;
            margin-bottom: 20px;
            font-size: 20px;
            font-weight: normal;
        }

        .url {
            text-decoration: underline;
            font-size: 16px;
            color: #e9f1f9;
        }

        @media only screen and (max-width: 950px) {
            body {
                height: 100vh;
                width: 100vw;
            }

            .status {
                font-size: 400px;
                right: -15%;
            }

            .man {
                width: 50%;
                left: 10%;
                bottom: 5px;
            }
        }

        @media only screen and (max-width: 550px) {
            .content {
                margin-top: 5vh;
                padding-left: 8%;
            }

            .indicator {
                margin-bottom: 5vh;
            }

                .indicator > span {
                    font-size: 13px;
                }

            .suggest_title {
                font-weight: bold;
                font-size: 13px;
                margin-bottom: 3vh;
            }

            .url {
                padding-right: 5vw;
                word-break: break-all;
            }

            .suggest_title::before {
                left: -13px;
                width: 6px;
                height: 6px;
                margin-top: -3px;
            }

            .status {
                font-size: 300px;
                bottom: 10px;
                right: -10%;
            }

            .man {
                width: 50%;
                left: 10%;
            }

            .url {
                font-weight: lighter;
            }
        }
    </style>
</head>

<body>
    <div class="content">
        <div class="indicator">
            <svg class="logo" viewBox="0 0 27 28" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                    <g id="Desktop-HD-Copy-2" transform="translate(-95.000000, -103.000000)">
                        <g id="Group-5" transform="translate(69.000000, 90.000000)">
                            <g id="logo" transform="translate(29.000000, 16.000000)">
                                <ellipse id="Oval-5" fill="#FFFFFF" cx="21.8181818" cy="14.4262295" rx="2.18181818" ry="2.16393443"></ellipse>
                                <path d="M21.5192092,6.45125696 C19.907965,2.34960877 15.7965299,0 11.0909091,0 C4.96556914,0 0,4.92486775 0,11 C0,17.0751322 4.96556914,22 11.0909091,22 C13.8207602,22 16.3202606,21.021835 18.2525326,19.3996213"
                                      id="Oval-4"
                                      stroke="#FFFFFF"
                                      stroke-width="4.14"
                                      stroke-linecap="round"></path>
                                <path d="M19.0195537,5.40983607 C14.3450033,8.09745626 11.3726458,9.85484859 10.1024813,10.6820131 C8.19723447,11.9227598 9.78863892,15.3988957 12.6869627,13.8787687 C14.6191785,12.8653506 18.0663476,10.8243685 23.0284699,7.75582216 L19.0195537,5.40983607 Z"
                                      id="Path-24"
                                      fill="#FFFFFF"></path>
                            </g>
                        </g>
                    </g>
                </g>
            </svg>

            <span>Page Not Found</span>
        </div>

        <ul class="suggestions">
            <li class="suggest">
                <strong class="suggest_title">不好！你好像迷路了，请检查以下域名是否正确：</strong>
                <p class="url" id="url"></p>
            </li>
        </ul>
    </div>

    <svg class="man" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 328 130">
        <defs>
            <linearGradient id="a" x1="60.249%" x2="89.553%" y1="36.665%" y2="100%">
                <stop offset="0%" stop-color="#599AD9" />
                <stop offset="100%" stop-color="#5CA3E7" />
            </linearGradient>
            <linearGradient id="b" x1="9.551%" x2="95.234%" y1="5.084%" y2="95.49%">
                <stop offset="0%" stop-color="#76B5F3" />
                <stop offset="100%" stop-color="#4B99E3" />
            </linearGradient>
            <linearGradient id="d" x1="33.929%" x2="64.495%" y1="0%" y2="82.266%">
                <stop offset="0%" stop-color="#6AAAE7" />
                <stop offset="100%" stop-color="#4294E2" />
            </linearGradient>
            <path id="c"
                  d="M275.098 33.904c-.704.954-2.247 4.784-6.604 6.666-1.44-.272-7.236-4.466-10.605-5.197-4.42-.96-6.714 2.03-6.299 1.744 1.57-1.079-3.217 2.914-4.944 5.428-1.728 2.514-8.754-4.54-9.646-8.64 0-3.589 3.078-22.267 19.233-21.37 16.154.897 19.314 11.63 18.865 21.37z" />
            <linearGradient id="f" x1="43.468%" x2="87.459%" y1="20.618%" y2="96.355%">
                <stop offset="0%" stop-color="#8EC3F6" />
                <stop offset="100%" stop-color="#73B3F1" />
            </linearGradient>
        </defs>
        <g fill="none" fill-rule="evenodd">
            <ellipse cx="171.5" cy="117" fill="#64A3DE" rx="156.5" ry="9" />
            <path fill="url(#a)"
                  d="M159.388 46.686c0 14.906 27.961 59.05 30.265 61.882 3.385 1.09 8.218.638 14.499-1.358-6.37-37.646-13.527-58.444-21.469-62.395-16.62-8.268-13.056-37.491-54.71-37.491-6.415 0-10.171 19.466 2.072 30.5 5.68 5.121 29.343 6.294 29.343 8.862z" />
            <path fill="#528EC7"
                  d="M191.619 107.264c-1.696 3.043-3.393 7.768-1.89 10.532 1.003 1.842 4.47 2.421 10.398 1.737 8.024.663 22.311 1.012 24.704 0 2.392-1.011-3.5-5.927-9.065-6.702-5.565-.775-8.747-3.436-10.157-4.273-1.41-.837-12.294-4.336-13.99-1.294z" />
            <path fill="#ACD3FA"
                  d="M192.53 108.744v2.667c1.82 1.508 3.193 2.296 4.122 2.364 3.202.235 6.17-.473 6.355-.643.547-.5.354-1.403-.579-2.708-6.6-3.019-9.899-3.579-9.899-1.68z" />
            <path fill="#B8D7F3"
                  d="M188.151 106.446c0 .51.797 1.768 2.39 3.772 2.869.47 5.306.705 7.313.705 2.006 0 4.993-.455 8.959-1.366v-6.055c-5.113.167-8.592.378-10.438.631-5.512.757-8.224 1.974-8.224 2.313z" />
            <ellipse cx="279" cy="123" fill="#64A3DE" rx="28" ry="7" />
            <path fill="#ACD3FA"
                  d="M283.026 117.822c3.21 1.413 8.591 2.407 10.059 4.797 1.467 2.39-3.34 3.776-8.77 3.083-5.429-.693-12.385-1.182-12.385-3.85v-4.03c5.257-.942 8.955-.942 11.096 0z" />
            <path fill="url(#b)"
                  d="M128.49 5.715C159.036-4.785 233.273-6.95 276.312 58.71c5.636 11.25 7.268 46.734 7.268 59.914-4.04.859-7.856.859-11.447 0-9.164-39.84-19.548-61.255-31.153-64.244-11.604-2.989-17.289-3.463-17.054-1.422l-1.55 39.137c22.934-11.026 34.961-16.54 36.082-16.54 1.12 0 2.402 3.078 3.847 9.233-28.127 21.497-42.87 32.776-44.228 33.836-2.039 1.59-8.426 2.612-10.234 1.306-1.808-1.306-16.14-58.742-13.167-65.55-7.025.753-20.624 2.197-40.798 4.33-37.289-28.33-45.752-45.996-25.388-52.996z" />
            <path fill="#ACD3FA"
                  d="M269.424 38.443c-.522 1.072-4.205 4.76-11.05 11.066-3.844 2.107-6.143 3.16-6.898 3.16-.382 0-2.103-1.665-5.162-4.996-4.743.565-7.242.708-7.498.43-2.242-2.44-1.204-4.546-1.204-5.2 0-1.431 4.683-18.368 10.333-19.176 3.766-.539 10.472.024 20.118 1.689 1.429 7.613 1.882 11.955 1.36 13.027z" />
            <path fill="#C9E5FF"
                  fill-opacity=".571"
                  d="M269.46 41.165c-3.661 4.924-7.567 8.68-11.716 11.27-2.435-2.412-3.434-4.983-3-7.713.653-4.094 5.763-8.077 6.968-9.103.802-.684 2.465-.56 4.988.37 5.501-1.474 6.422.251 2.76 5.176z" />
            <mask id="e" fill="#fff"><use xlink:href="#c" /></mask>
            <use fill="url(#d)" xlink:href="#c" />
            <g mask="url(#e)">
                <g transform="rotate(31 91.624 498.885)">
                    <ellipse cx="9.091" cy="5.902" fill="#FFF" rx="1" ry="1" />
                    <path stroke="#FFF"
                          stroke-linecap="round"
                          stroke-width="1.656"
                          d="M8.966 2.64C8.295.96 6.582 0 4.621 0 2.07 0 0 2.015 0 4.5S2.069 9 4.621 9c1.138 0 2.18-.4 2.984-1.064" />
                    <path fill="#FFF"
                          d="M7.925 2.213c-1.948 1.1-3.186 1.819-3.716 2.157-.793.507-.13 1.93 1.077 1.308.805-.415 2.242-1.25 4.31-2.505l-1.671-.96z" />
                </g>
            </g>
            <circle cx="260" cy="37" r="2" fill="#DCEEFF" />
            <path fill="url(#f)"
                  d="M128.27 6.609c-9.421 3.03-51.265 21.273-12.056 80.691-20.517 2.178-63.4 10.676-64.72 11.58-.88.602-1.143 6.416-.789 17.441h116.64c5.282 0 8.29-6.594 7.523-13.82-2.241-6.367-42.295-86.854-46.598-95.892z" />
            <path fill="#5596D4"
                  d="M37.328 104.012c-.152-.252-2.61-1.562-4.578-3.487-1.906-1.863-.866-3.238-3.747-4.523-2.88-1.285-5.871 5.814-12.178 8.9-4.617 2.259-12.205 3.29-13.375 4.075-5.952 3.995-1.534 6.322 1.386 6.322h35c-.134-4.973-.97-8.735-2.508-11.287z" />
            <path fill="#ACD3FA"
                  d="M43.23 104.543c-1.705 0-3.909-.232-6.613-.696-5.16 6.127-7.35 9.872-6.57 11.235h14.197c1.027-7.026.689-10.54-1.015-10.54z" />
            <path fill="#ABD3F7" d="M51.021 96.832c-2.376.442-5.09 1.161-8.143 2.16v17.215h8.143c.972-10.167.972-16.625 0-19.375z" />
            <g transform="translate(264 48)">
                <circle cx="11.5" cy="7.5" r="9" fill="#529FEA" fill-opacity=".472" stroke="#D7E7F6" stroke-width="3" />
                <path fill="#D7E7F6"
                      d="M6.82 16.268C3.434 28.53 1.502 35.744 1.022 37.91c-.72 3.249 2.924 4.459 3.973 1.227.7-2.154 2.64-9.376 5.823-21.666L6.82 16.268z" />
            </g>
            <path fill="#91C5F7"
                  d="M260.155 74.858c2.015-1.845 7.8-7.201 13.876-5.37 6.076 1.83.634 5.52-1.969 6.703-2.602 1.184-6.568 7.07-9.323 6.761-2.754-.308-4.598-6.25-2.584-8.094z" />
        </g>
    </svg>

    <h1 class="status">404</h1>

</body>
<script>
    window.addEventListener('DOMContentLoaded', function() {
      document.getElementById('url').innerText = window.location.href
    })
</script>
</html>
